<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useHospitalStore } from '@/store/modules/hospitalStore'
import { useClientStore } from '@/store/modules/clientStore'
import router from '@/router'
const hospitalStore = useHospitalStore()
const clientStore = useClientStore()
const { doctorInfo } = storeToRefs(hospitalStore)
const { ofPatientList } = storeToRefs(clientStore)

const route = useRoute()

const activeId = ref<number | null>(null)
/** 选中就诊人 */
const activePatient = (id: number) => {
  activeId.value = id
}

import { useOrderStore } from '@/store/modules/orderStore'
const orderStore = useOrderStore()

/** 点击确认挂号 */
const gotoUser = async () => {
  try {
    const id = await orderStore.addOrderInfo(route.query.code as string, route.query.docId as string, activeId.value as number)
    router.push({
      path: '/user/order',
      query: {
        id,
      },
    })
  } catch (error: any) {
    ElMessage.error(error.message)
  }
}

onMounted(() => {
  clientStore.toObtainListOfPatient()
  hospitalStore.modifyDoctorInformation(route.query.docId as string)
})
/** 添加就诊人 */
const addPatient = () => {
  router.push('/user/patient/a_u_patient')
}
</script>

<template>
  <h1 class="tip">请确认就诊人信息</h1>
  <el-card class="container">
    <!-- 就诊人头部 -->
    <div class="doc_header">
      <h2>请点击选择就诊人</h2>
      <el-button icon="User" type="success" @click="addPatient">添加就诊人</el-button>
    </div>
    <!-- 就诊人展示区域 -->
    <div class="doc_content">
      <!-- 就诊人卡片 -->
      <doc_card v-for="(item, index) in ofPatientList" :key="index" :ofPatient="item" :active="activeId" @click="activePatient(item.id)" />
      <!-- 空状态 -->
      <el-empty class="empty" v-if="ofPatientList.length === 0" description="无就诊人信息" />
    </div>
  </el-card>
  <!-- 挂号信息 -->
  <el-card>
    <template #header>
      <div>
        <span>挂号信息</span>
      </div>
    </template>
    <el-descriptions border :column="2">
      <el-descriptions-item label="就诊日期">
        <span>{{ doctorInfo.workDate }}</span>
        <span style="margin-left: 10px">{{ doctorInfo.param?.dayOfWeek }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="就诊医院">{{ doctorInfo.param?.hosname }}</el-descriptions-item>
      <el-descriptions-item label="就诊科室">{{ doctorInfo.param?.depname }}</el-descriptions-item>
      <el-descriptions-item label="医生姓名">{{ doctorInfo.docname }}</el-descriptions-item>
      <el-descriptions-item label="医生职称">{{ doctorInfo.title }}</el-descriptions-item>
      <el-descriptions-item label="医生专长">{{ doctorInfo.skill }}</el-descriptions-item>
      <el-descriptions-item label="医事服务费">
        <span style="color: red">{{ doctorInfo.amount }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
  <!-- 确认挂号 -->
  <el-button type="primary" class="registered" :disabled="!activeId" @click="gotoUser">确认挂号</el-button>
</template>

<style lang="scss" scoped>
.tip {
  font-weight: bold;
  color: #7f7f7f;
  font-size: 20px;
  margin-left: 20px;
}
.container {
  margin: 30px 0;
  .doc_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 20px 0;
    border-bottom: 1px solid #e6e6e6;
  }
  .doc_content {
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .empty {
      margin: 0 auto;
    }
  }
}
.registered {
  margin: 20px;
  width: 150px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>
